<% layout('/layout/page') -%>
<% block('title', "Регистрация и вход") -%>

<p>Введите имя пользователя и пароль. Если такого пользователя нет - он будет создан.</p>

<form class="form-horizontal login-form" action="/auth/login" method="POST" name="login-form">
  <div class="form-group">
    <label for="input-username" class="col-lg-2 control-label">Имя</label>

    <div class="col-lg-10">
      <input name="username" value="name" type="text" class="form-control" id="input-username" placeholder="Имя">
    </div>
  </div>
  <div class="form-group">
    <label for="input-password" class="col-lg-2 control-label">Пароль</label>

    <div class="col-lg-10">
      <input name="password" value="pass" type="password" class="form-control" id="input-password" placeholder="Пароль">
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-primary" data-loading-text="Отправляю...">Войти</button>
      <span class="help-block error"></span>
    </div>
  </div>
</form>

<script>
  $(document.forms['login-form']).on('submit', function() {
    var form = $(this);

    $('.error', form).html('');
    $(":submit", form).button("loading");

    $.ajax({
      url: "/login",
      data: form.serialize(),
      method: "POST",
      complete: function() {
        $(":submit", form).button("reset");
      },
      statusCode: {
        200: function() {
          form.html("Вы вошли в сайт").addClass('alert-success');
          window.location.href = "/chat";
        },
        403: function(jqXHR) {
          var error = JSON.parse(jqXHR.responseText);
          $('.error', form).html(error.message);
        }
      }
    });
    return false;
  });
</script>